<template>
    <div class="customer-card">
        <div class="title-box">群成员</div>
        <div class="seach-box">
            <ZwSearchForm row-num="3" :option="searchOption" @search="search" @reset="reset" @expand="getTableH" />
        </div>
        <div class="control-btn-box">
            <span
                >当前群成员：{{ memberInfo.current_members_num }}人；累计退群成员：{{
                    memberInfo.sign_out_members_num
                }}人</span
            >
        </div>
        <ZwTable
            ref="tableRef"
            class="table-box"
            is-limit-height
            :option="tableOption"
            :row-key="getRowKey"
            :fetch-params="state.searchParams"
            :fetch-api="fetchApi()"
            @dataChange="dataChange"></ZwTable>
    </div>
</template>

<script setup lang="tsx">
import { reactive, ref, computed, nextTick } from 'vue';
import { useRoute } from 'vue-router';
import ZWPagination from '@/components/ZWPagination.vue';
import { getGroupMembers } from '@/api/customerCenter/groupManage';
import { getSetionId } from '@/utils/utils';
import { useStore } from '@/store';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import ZwTable from '@/components/zw/table/Table';
import { deepCopy } from '@/utils/helper';
import { ElMessage, ElAvatar } from 'element-plus';
import act from '@/assets/image/account/default_avatar.png';
import sex0 from '@/assets/image/customer/sex_0.png';
import sex1 from '@/assets/image/customer/sex_1.png';
import sex2 from '@/assets/image/customer/sex_2.png';

const router = useRoute();
const PaginationRef = ref({});
const seachData: any = ref({
    groupchat_id: router.query.id || 1,
    member_status: -1,
    member_id: '',
    time: '',
    select_time: ''
});
const tableData: any = ref([]);
const tableRef: any = ref(null);
const DepartRef = ref({});
const store = useStore();
const userOption = ref([]);
const pageType = reactive({
    type: 0,
    isCheck: false,
    list: [
        { type: 0, name: '当前页' }
        // { type: 1, name: '全部页' }
    ]
});
const memberInfo = ref({
    current_members_num: 0,
    sign_out_members_num: 0
});
const getRowKey = (row: any) => {
    return row.id;
};

const searchOption = computed(() => {
    return [
        {
            label: '',
            name: 'member_status',
            value: '',
            type: 'select',
            placeholder: '全部',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    resolve([
                        { name: '全部', id: '-1' },
                        { name: '正常', id: '0' },
                        { name: '退群', id: '1' }
                    ]);
                });
            },
            formatOption: (v: { name: any; id: any }) => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '',
            name: 'member_id',
            value: [],
            type: 'select',
            placeholder: '全部',
            multiple: true,
            popperClass: 'zw-hide_select_option',
            isUserSelect: true,
            formatOption: v => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '',
            name: 'select_time',
            value: [],
            type: 'datePicker',
            datePickerType: 'daterange',
            datePickerFormat: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期'
            // 设置结束日期时间为 23:59:59，设完日期不能点击 elment-plus bug？
            // defaultTime: ['00:00:00', '23:59:59']
        }
    ];
});
const tableOption = [
    {
        prop: 'cust_avatar',
        label: '成员',
        render({ row }) {
            return (
                <div class="avatar-box">
                    <div style="display: flex; align-items: center">
                        <ElAvatar shape="square" size={36} src={row.avatar}>
                            <img src={act} />
                        </ElAvatar>
                    </div>
                    <div class="name">
                        {row.name}
                        <img class="sex" vShow={row.sex == 0} src={sex0} alt="" />
                        <img class="sex" vShow={row.sex == 1} src={sex1} alt="" />
                        <img class="sex" vShow={row.sex == 2} src={sex2} alt="" />
                        <div class={row.type == '群主' ? 'active' : ''}>{row.type}</div>
                    </div>
                </div>
            );
        }
    },
    {
        prop: 'join_time',
        label: '入群时间',
        render({ row }) {
            return <div>{row.join_time || '--'}</div>;
        }
    },
    {
        prop: 'send_num',
        label: '所在其他群数',
        render({ row }) {
            return <div>{row.other_group_num}个</div>;
        }
    },
    {
        prop: 'join_time',
        label: '退群时间',
        render({ row }) {
            return <div>{row.is_quit == 1 ? row.sign_out_time : '--'}</div>;
        }
    },
    {
        prop: 'join_scene',
        label: '入群方式'
    }
];
const defaultParams = reactive({
    groupchat_id: router.query.id || 1,
    member_status: -1,
    member_id: '',
    time: '',
    select_time: []
});
const state = reactive({
    searchParams: deepCopy({ ...defaultParams, groupchat_id: router.query.id })
});
const search = (data: any) => {
    state.searchParams = deepCopy({ ...defaultParams, ...data, groupchat_id: router.query.id });
};
const reset = (v?: any) => {
    const res = { ...state.searchParams, ...seachData.value, groupchat_id: router.query.id };
    state.searchParams = res;
};
const fetchApi = () => {
    // 获取文件列表
    // getTableH()
    return getGroupMembers;
};
const getTableH = () => {
    nextTick(() => {
        tableRef.value.getTableH();
    });
};
const dataChange = (data: any) => {
    memberInfo.value.current_members_num = data.current_members_num;
    memberInfo.value.sign_out_members_num = data.sign_out_members_num;
};
</script>

<style lang="scss" scoped>
.customer-card {
    padding: 16px 20px;

    .title-box {
        font-size: 16px;
        font-weight: 500;
        color: #33302d;
        margin-bottom: 18px;
    }

    .seach-box {
        background: #f9f9f9;
        padding: 16px 12px;
        margin-bottom: 10px;

        :deep(.el-row) {
            display: flex;
            flex-wrap: wrap;
            position: relative;
            box-sizing: border-box;
            margin: -8px -10px;

            .el-col {
                margin: 8px 0;

                &:last-of-type {
                    flex: auto;
                    text-align: right;
                }

                .el-select {
                    width: 100%;
                }

                .el-date-editor {
                    width: 97%;
                }
            }
        }

        .form-item {
            box-sizing: border-box;
            height: 40px;
            display: inline-block;
        }
    }

    .control-btn-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 16px;

        span {
            font-size: 14px;
            font-family: STHeitiSC-Light, STHeitiSC;
            color: #ff6b00;
        }
    }

    .left {
        .select-box {
            padding: 0 12px;
            border: 1px solid #eaeaea;
            background: #f9f9f9;
            border-radius: 1px;
            margin-right: 28px;

            .el-input__inner {
                border: none;
            }
        }
    }

    .page-limit-box {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
}

:deep(.avatar-box) {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .avatar {
        width: 36px;
        height: 36px;
        border-radius: 4px;
    }

    .name {
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #33302d;
        max-width: 80px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        margin: 0 10px;

        div {
            background: #ffeaf8;
            border-radius: 4px;
            border: 1px solid #ffacf0;
            text-align: center;
            font-size: 12px;
            color: #ff00c4;
            line-height: 16px;
            padding: 0 6px;
            margin-top: 2px;

            &.active {
                background: #eaf2ff;
                border: 1px solid #b6dbff;
                color: #0081ff;
            }
        }
    }

    .sex {
        width: 18px;
        height: 18px;
        margin-left: 4px;
        vertical-align: middle;
    }
}
</style>
<style lang="scss">
.select-box {
    .el-input__inner {
        border: none !important;
        background: #f9f9f9;
    }
}

.table_header_title {
    height: 60px;

    th.el-table__cell {
        background: #f9f9f9;
        padding: 10px 0;
    }
}
</style>
